<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>QQ音乐</title>
    <link href="favicon.ico" rel="shortcut icon">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../static/lib/malihu-custom-scrollbar-plugin-master/jquery.mCustomScrollbar.min.css">
	<link rel="stylesheet" type="text/css" href="../static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../static/css/index.css">
</head>
<body >

	<div class="header">
		<div class="logo">
			<img src='../static/images/logo.png' style="margin:3px"/>
		</div>
		<div class="register">
			<a href="login"><font class="login" size="4">登录</font></a>
			<a href="javascript:void(0);"><font class="settings" size="4">设置</font></a>
		</div>
	</div>
	<div class="container">
		<div class="container_in" >
			<div class="left" >
				<div class="opt_bar">
					<span >收藏</span> 
					<span >添加到</span>
					<span>下载</span>
					<span>删除</span>
					<span>清空列表</span>
				</div>
				<div class="list" >
					<ul >
						<li class="title">
							<div class="check"><i></i></div>
							<div class="number"></div> 
							<div class="song">歌曲</div>
							<div class="seat">
								<span class='glyphicon glyphicon-play' aria-hidden='true' id='paly-icon'></span>
							</div>
							<div class="singer">歌手</div>
							<div class="length">时长</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="right">
				<div class="img">
					<img alt="图片未加载">
				</div>
				<div class="info">
					<ul>
						<li ><span>歌曲名:&emsp;</span><span class='detail' id="songname"></span></li>
						<li ><span>歌手名:&emsp;</span><span class='detail' id="singername"></span></li>
						<li ><span>专辑名:&emsp;</span><span class='detail' id="ablum"></span></li>
			
					</ul>
				</div>
				<div class="lyric_container">
					<ul class="lyric">
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="btn_bar">
			<div id="pre-icon">
			 	<span class="glyphicon glyphicon-step-backward" aria-hidden="true" ></span> 
			</div>
			<div id="play-icon">
			 	<span class="glyphicon glyphicon-play" aria-hidden="true" ></span>
			</div>
			<div id="next-icon">
			 	<span class="glyphicon glyphicon-step-forward" aria-hidden="true" ></span>  
			</div>
		</div>
 		<div class="process_bar">
			 <div class="txt">
			 	<font class="song"></font>
			 	<font class="time" style="float: right;"></font>
			 </div>
			 <div class="pro_bar">
			 	<div class="pro_line"></div>
			 	<div class="pro_dot"></div>
			 </div>
		</div> 
		<div class="self_bar">
			<font>模式</font>
			<font>喜欢</font>
			<font>下载</font>
			<font>纯净</font>
		</div>
		<div class="voice_bar">
			<div class="icon">
				<span class="glyphicon glyphicon-volume-up" aria-hidden="true" id="voice-icon"></span> 
			</div>
			<div class="voi_bar">
				<div class="voi_line"></div>
				 <div class="voi_dot"></div>
			</div>
				 
		</div>
	</div>

	<div class="bg_mask"></div>
	<div class="mask"></div>

	<audio src=""></audio>
	    

    </script>
	<script type="text/javascript" src="../static/lib/jquery-1.12.4-dist/jquery-1.12.4.min.js"></script>

	<script type="text/javascript" src="../static/lib/malihu-custom-scrollbar-plugin-master/jquery.mCustomScrollbar.concat.min.js"></script>


	<script type="text/javascript" src="../static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

	<script type="text/javascript" src="../static/js/player.js"></script>
	<script type="text/javascript" src="../static/js/progress.js"></script>
	<script type="text/javascript" src="../static/js/lyric.js"></script>

	<script type="text/javascript" src="../static/js/index.js"></script>
</body>
</html>